<template>
  <div >
    <div class="banner" style="margin-top: 60px">
      <el-card>
        <el-button type="info" @click="$router.push('/myblog')"><i class="el-icon-arrow-left"></i>返回</el-button>

        <el-button type="primary" style="float: right" @click="save"> 发布文章
        </el-button>
        <el-button type="primary" style="float: right" @click="canle"> 取消</el-button>

      </el-card>

      <el-form :model="form" label-width="120px" :rules="rules" ref="form">
        <el-form-item label="标题" style="margin-left: 300px;margin-top: 40px" prop="title">
          <el-input v-model="form.title" type="title" style="width: 50%" placeholder="请输入标题"></el-input>

          <el-select v-model="form.category" placeholder="请选择文章类别"
                     style=";margin-left: 100px;z-index: 100;position: relative">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面" style=";margin-left: 1250px;z-index: 100;position:  relative;top: -50px;">
          <el-upload
            ref="upload"
            action="http://127.0.0.1:8083/files/upload"
            :on-success="filesUploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
        </el-form-item>
        <div id="div1" v-model="form.content" style="opacity: 0.9999;font-size: 15px;margin-top: -15px">

        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  import request from '../utils/request'
  import router from '@/router'
  import emotion from '../utils/emotion.js'
  import img from '../utils/img.js'
  import "../assets/index.css";
  let editor
  export default {
    name: 'Editor',
    data() {
      return {
        options: [{
          value: '面试',
          label: '面试'
        }, {
          value: '数据库',
          label: '数据库'
        }, {
          value: '安全',
          label: '安全'
        }, {
          value: '学习笔记',
          label: '学习笔记'
        }, {
          value: '大数据',
          label: '大数据'
        },
          {
            value: '前端',
            label: '前端'
          },
          {
            value: '架构',
            label: '架构'
          },
          {
            value: 'java',
            label: 'java'
          },
          {
            value: '心得',
            label: '心得'
          },
          {
            value: '其他',
            label: '其他'
          }],
        value: '',

        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ]

        },
        form: { title: '', content: '', category: '' }
      }
    },
    mounted() {
      //关联div
      this.$nextTick(() => {
        editor = new E('#div1')

        editor.config.uploadImgServer = 'http://localhost:8083/files/editor/load'
        editor.config.uploadFileName = 'file'
        editor.config.emotions = [
          {
            title: 'gif表情', // tab 的标题
            type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
            content: [
            ]
          },
          {
            title: '表情', // tab 的标题
            type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
            content: [
            ]
          }
        ];

        let  emotions=emotion.c
        let imgs=img.m
        emotions.forEach(item => {
          editor.config.emotions[0].content.push({alt: item.value,src: item.icon})
        })
        imgs.forEach(item=>{
          editor.config.emotions[1].content.push({ alt: item.phrase, src: item.url })
        })
        editor.create()
      })
    },
    methods: {
      //文件上传  更新文件
      filesUploadSuccess(res) {
        console.log(res.data)
        this.form.img = res.data
      },
      canle() {
        this.form = {}
        this.$nextTick(() => {
          if (editor == null) {
            editor = new E('#div1')
            /* editor.config.uploadImgServer = 'http://localhost/files/editor/load'
                 editor.config.uploadFileName="file"*/
            editor.config.zIndex = 10000

            editor.create()
          } else {
            editor.destroy()
            editor = new E('#div1')
            editor.create()
          }
        })
        this.$message({
          message: '已成功取消',
          type: 'success'
        })
      },
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.content = editor.txt.html()//获取编辑器的值，赋予到实体当中
            // console.log(editor.txt.html())
            if (this.form.content === '') {
              this.$message.warning('请输入内容')
              return
            }

            if(this.form.category===''){
              this.$message.warning('请输入文章类别')
              return
            }

            //    新增
            let userStr = sessionStorage.getItem('user') || '{}'
            let user = JSON.parse(userStr)
            this.form.author = user.nick


            request.post('/news/addNew', this.form).then(res => {
              if (res.code === 20000) {
                this.$message({
                  message: '发布成功',
                  type: 'success'
                })
                router.push('/myblog')
              }
              else {
                this.$message({
                  message: res.msg,
                  type: 'error'

                })
              }
            })
          }
        })
      }

    }

  }
</script>

<style scoped>

</style>
